import React, { Component } from 'react';
import { withRouter, Link, Switch, Route } from 'react-router-dom'
import { Input, DatePicker, InputNumber, Button, message } from 'antd';
import Loading from "./../loading"
import moment from 'moment';

import "./../../static/specialMonitoring/addTopic.styl"
import $ from "jquery";
import u from "../../common";

const { RangePicker } = DatePicker;

export default class AddTopic extends React.Component {
  state = {
    startTime: "",
    endTime: "",
    frequency: 0,
    endTimeChuo: "",
    newChuo: ''
  };
  goRouter(d) {
    this.props.history.push(d)
  }
  // onChangeDate = async (value, dateString) => {
  //   this.setState(prevState => ({
  //     startTime: moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss'),
  //     endTime: moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss'),
  //   }));
  // };
  onOkDate = async (value) => {
    let endTimeChuo = (new Date(moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss')).getTime())/1000
    let newChuo = parseInt(new Date().getTime()/1000)
    let startTime =  moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss')
    let endTime =  moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss')
    this.setState(prevState => ({
      startTime: startTime,
      endTime: endTime,
      endTimeChuo: endTimeChuo,
      newChuo: newChuo
    }));
  };
  onChangeKey = async (value) => {
    this.setState(prevState => ({
      frequency: value
    }));
  };

  addTopic = async () => {
    let endTimeChuo = this.state.endTimeChuo
    let newChuo = this.state.newChuo
    if (endTimeChuo && Number(endTimeChuo) < Number(newChuo)) {
      return message.error('选择日期不能小于当天')
    }

    if ($("#topicName").val() == "") {
      message.warning('请填写专题名称');
    } else if (this.state.startTime == "") {
      message.warning('请填写时间');
    } else if ($("#placeKey").val() == "") {
      message.warning('请填写地名关键词');
    } else {
      u.addTopic({
        moduleName: $("#topicName").val(),
        startTime: this.state.startTime,
        endTime: this.state.endTime,
        areaKey: $("#placeKey").val(),
        frequency: this.state.frequency
      }, data => {
        if (data.statusCode === 200) {
          message.success('添加成功');
          window.location.reload();
          window.location.href = u.testurl + '/topicDetail?index=' + data.data + "&key=" + 1;
        } else {
          message.error(data.message);
        }
      })
    }
  };

  onDownLoad() {
    window.open(u.baseUrl + '/help/help.docx')
  }

  render() {
    return (
      <div style={{ width: "100%", height: "100%", background: "white" }}>
        <Loading />
        <div className="at-content">
          <div className="at-line">
            <span className="at-title">专题名称:</span>
            <Input placeholder="请输入专题名称" id="topicName" />
          </div>
          <div className="at-line">
            <span className="at-title">选择日期:</span>
            <RangePicker
              showTime={{ format: 'HH:mm' }}
              format="YYYY-MM-DD HH:mm"
              placeholder={['Start Time', 'End Time']}
              onChange={this.onChangeDate}
              onOk={this.onOkDate}
            />
          </div>
          <div className="at-line">
            <span className="at-title">监测关键词:</span>
            <Input placeholder="请输入关键词" id="placeKey" />
            {/*<Input placeholder="请输入事件关键词" className="keyEvent" id="eventKey"/>*/}
          </div>
          <div className="tishi">关键词表达式可以根据需求自行书写，具体配置方法请下载下方的关键词配置说明</div>
          <div className='download2' onClick={this.onDownLoad.bind(this)}>配置文档下载</div>
          <div className="at-line">
            <span className="at-title">检测频率(选填):</span>
            <InputNumber
              defaultValue={0}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              parser={value => value.replace('%', '')}
              onChange={this.onChangeKey}
            />
          </div>
          <Button type="primary" onClick={this.addTopic} style={{ marginLeft: 126, marginRight: 30 }}>提交</Button>
          <Button onClick={() => this.goRouter('/topic')}>取消</Button>
        </div>
      </div>
    );
  }
}